<template>
  <t-card theme="poster2" :bordered="false">
    <template #avatar>
      <t-avatar size="56px">
        <template #icon>
          <laptop-icon v-if="server.type === 'web'" />
          <link-icon v-if="server.type === 'http'" />
        </template>
      </t-avatar>
    </template>
    <template #status>
      <t-tag :theme="server.status ? 'success' : 'default'" :disabled="!server.status">{{
        server.status ? '运行中' : '已停止'
      }}</t-tag>
    </template>
    <template #content>
      <p class="list-card-item_detail--name">{{ server.name }}</p>
      <p class="list-card-item_detail--desc">{{ `${server.type}代理服务器：port=${server.port}` }}</p>
    </template>
    <template #footer>
      <t-avatar>{{ server.type }}</t-avatar>
    </template>
    <template #actions>
      <t-dropdown
        trigger="click"
        :options="[
          {
            content: '重启',
            value: 'restart',
            onClick: () => handleClickRestart(server),
          },
          {
            content: '停止',
            value: 'stop',
            onClick: () => handleClickStop(server),
          },
        ]"
      >
        <t-button theme="default" shape="square" variant="text">
          <more-icon />
        </t-button>
      </t-dropdown>
    </template>
  </t-card>
</template>
<script setup lang="ts">
import { LaptopIcon, LinkIcon, MoreIcon } from 'tdesign-icons-vue-next';
import type { PropType } from 'vue';

import type { ServerInfo } from '@/api/model/serverModel';

// eslint-disable-next-line
const props = defineProps({
  server: {
    type: Object as PropType<ServerInfo>,
  },
});

const emit = defineEmits(['restart-server', 'stop-server']);

const handleClickRestart = (server: ServerInfo) => {
  emit('restart-server', server);
};

const handleClickStop = (server: ServerInfo) => {
  emit('stop-server', server);
};
</script>

<style lang="less" scoped>
.list-card-item {
  display: flex;
  flex-direction: column;
  cursor: pointer;

  &_detail {
    min-height: 140px;

    &--name {
      margin-bottom: var(--td-comp-margin-s);
      font: var(--td-font-title-medium);
      color: var(--td-text-color-primary);
    }

    &--desc {
      color: #141313;
      font: var(--td-font-body-small);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
